<template>
  <section>
    <el-row>
      <el-col class="header" :span="21">
        <div class="back" @click="back">
          <span>🔙返回</span>
        </div>
        <div>
          <el-button class="daochu" type="primary">导出EXCEL</el-button>
        </div>
      </el-col>
    </el-row>
    <el-row class="table">
      <el-col class="header" :span="21">
        <el-card>
          <div class="title">{{ resultList.name }}</div>
          <div class="desc">( {{ resultList.desc }} )</div>
          <!-- 索引列 -->
          <el-table border :data="resultList.group" style="width: 100%">
            <el-table-column type="index" label="#" width="50">
            </el-table-column>
            <el-table-column type="expand">
              <!-- 二级表格 -->
              <template v-slot="scope">
                <div class="questionGroupResult">
                  <span
                    >问题组最终结果(含D选项):
                    {{ scope.row.questionGroup[0].result }}</span
                  >
                  <span>
                    问题组最终结果(不含D选项):
                    {{ scope.row.questionGroup[0].resultExceptPoor }}
                  </span>
                </div>
                <el-table
                  border
                  class="erjiTable"
                  :data="scope.row.questionGroup[0].question"
                  style="width:90%"
                >
                  <el-table-column label="问题" prop="name"> </el-table-column>
                  <el-table-column label="票数" prop="votes"> </el-table-column>
                  <el-table-column label="票数率" prop="score">
                  </el-table-column>
                  <el-table-column label="总得票数" prop="validVotes">
                  </el-table-column>
                  <el-table-column label="问题最终结果(含D选项)" prop="result">
                  </el-table-column>
                  <el-table-column
                    label="问题最终结果(不含D选项)"
                    prop="resultExceptPoor"
                  >
                  </el-table-column>
                </el-table>
              </template>
            </el-table-column>
            <el-table-column label="姓名" prop="name"> </el-table-column>
            <el-table-column label="组别" prop="groupName"> </el-table-column>
            <el-table-column label="最终结果(含D选项)" prop="result">
            </el-table-column>
            <el-table-column
              label="最终结果(不含D选项)"
              prop="resultExceptPoor"
            >
            </el-table-column>
          </el-table>
        </el-card>
        <!-- 表格区域 -->
      </el-col>
    </el-row>
  </section>
</template>
<script>
import { $http } from "../../request/service";

export default {
  name: "",
  data() {
    return {
      resultList: [],
      // 选项标签
      optionLabel: []
    };
  },
  mounted() {
    $http
      .get(`analysis/${this.$route.params.id}/${this.$route.params.flag}`)
      .then(res => {
        console.log(res);
        if (res.code !== 200) return this.$message.error(res.message);

        this.$message.success("问卷结果生成成功");
        res.data.group.forEach(item => {
          item.questionGroup[0].optionName = item.questionGroup[0].optionName.split(
            ","
          );
          // 重新组合数据
          item.questionGroup[0].question.forEach(item1 => {
            let votesNewArr = [];
            let scoreNewArr = [];
            for (let i = 0; i < item1.votes.length; i++) {
              votesNewArr.push(
                item.questionGroup[0].optionName[i] + ":" + item1.votes[i]
              );
            }
            item1.votes = votesNewArr.join(" ➤ ");
            // ---------------------------------------------------------------------------------
            for (let i = 0; i < item1.score.length; i++) {
              scoreNewArr.push(
                item.questionGroup[0].optionName[i] +
                  "率:" +
                  item1.score[i] +
                  "%"
              );
            }
            item1.score = scoreNewArr.join(" ➤ ");
          });
        });

        this.resultList = res.data;
        this.optionLabel = res.data.group[0].questionGroup[0].optionName;
      });
  },
  created() {},
  methods: {
    back() {
      this.$router.go(-2);
    }
  }
};
</script>
<style scoped>
.questionGroupResult {
  border: 1px solid #ebeef5;
  display: flex;
  justify-content: space-around;
  width: 90%;
  margin: 0 auto;
  font-size: 17px;
  /* padding: 10px; */
  height: 40px;
}
.questionGroupResult span {
  margin-left: 30px;
  line-height: 40px;
}
/* .questionGroupResult span:nth-child(2) {
  border-left: 1px solid #ebeef5;
} */
/deep/ .el-table .cell {
  text-align: center;
}
.erjiTable {
  margin: 0 auto;
}
.title {
  font-weight: 700;
  font-size: 20px;
}
.daochu {
  margin-top: 25px;
}
.desc {
  padding: 5px;
  color: red;
  font-size: 14px;
}
.table {
  margin-top: 30px;
}
.back {
  font-size: 15px;
  padding-top: 25px;
}
.back:hover {
  color: #0095ff;
  cursor: pointer;
}
.header {
  display: flex;
  justify-content: space-between;
}
.el-card {
  width: 100%;
}
</style>
